/* 
  1.  隐式循环
  2.  链式的调用 
  */
function Jq (selector) {
  if (typeof selector === 'string') {
    if (selector.startsWith('.')) {
      let doms = this.getClass(selector.slice(1))
      for (let i = 0; i < doms.length; i++) {
        this[i] = doms[i]  
      }
      this.length = doms.length
    } else if (selector.startsWith('#')) {
      this[0] = document.getElementById(selector.slice(1))
      this.length = 1
    } else if (/^[a-zA-Z][a-zA-z1-6]{0,10}$/.test(selector)){
      let doms = document.getElementsByTagName(selector);
      for(var i = 0; i < doms.length; i++){
        this[i] = doms[i];
      }
      this.length = doms.length;
    }
  } else if (typeof selector === 'function'){
    this.ready(selector);
  }
}

Jq.prototype = {
  getClass (className, el = document) {
    // getElementsByClassName 兼容性
    if(el.getElementsByClassName) return el.getElementsByClassName(className)
    // 不支持 getElementsByClassName 浏览器的解决办法
    const nodeList = el.getElementsByTagName('*') // 获取所有的标签
    let elArray = []
    for (let i = 0; i < nodeList.length; i++) {
      const node = nodeList[i].className.split(/\s+/ );  //这个正则表达式是因为class可能有多个,判断是否包含所查找的这个类名
      if (node.includes(className)) {
        elArray.push(nodeList[i])
      }
    }
    return elArray
  },
  /* 
  DOM文档加载流程：
  (1) 解析HTML结构。
  (2) 加载外部脚本和样式表文件。
  (3) 解析并执行脚本代码。
  (4) 构造HTML DOM模型。// DOMContentLoaded 相当于jQuery中的ready
  (5) 加载图片等外部文件。
  (6) 页面加载完毕。// load
  /* 
  EventTarget.addEventListener() 方法将指定的监听器注册到 EventTarget 上，当该对象触发指定的事件时，指定的回调函数就会被执行。 事件目标可以是一个文档上的元素 Element,Document和Window或者任何其他支持事件的对象 (比如 XMLHttpRequest)。
  */
  ready (callback) {
    // 当初始HTML文档已完全加载和解析时，将触发DOMContentLoaded事件，而不需要等待样式表，图像和子框架页面加载（事件可以用来检测HTML页面是否完全加载完毕(fully-loaded)）
    document.addEventListener('DOMContentLoaded', () => callback(), false)
  },
  each (callback) {
      console.log(this)
    for (let i = 0; i < this.length; i++) {
        callback(i, this[i])
    }
  },
  css (styleObj) {
    this.each((index, el) => {
      console.log(el)
      for (let key in styleObj) {
        el.style[key] = typeof styleObj[key] === 'number' ? `${styleObj[key]}px` : styleObj[key]
      }
    })
    return this
  },
  html (value) {
    this.each((index, el) => {
      el.innerHTML = value
    })
    return this
  },
  attr (attrObj) {
    this.each((index, el) => {
      for (let key in attrObj) {
        el.setAttribute(key, attrObj[key])
      }
    })
    return this
  },
  addClass (className) {
    this.each((index, el) => {
      const oldClassName = el.className
      el.className = `${oldClassName} ${className}`
    })
    return this
  },
  click (callback) {
    this.each((index, el) => {
        el.onclick = () => callback()
    })
    return this
  }
}

function $(selector) {
  return new Jq(selector)
}